---
const { breadcrumbs } = Astro.props;

breadcrumbs[breadcrumbs.length - 1].isCurrentPage = true;
---

<nav aria-label='breadcrumbs' class='breadcrumbs mt-4 mx-4 mb-0 g-c1'>
  <ol class='flex m-0 p-0 f-ellipsis'>
    {
      breadcrumbs.map(({ name, url, isCurrentPage = false }, i) => (
        <li
          class={`breadcrumb-item relative inline-block ${
            isCurrentPage ? 'txt-050 fs-no md:fs-sm f-ellipsis' : 'txt-150'
          }`}
        >
          <a
            href={url}
            class='lnk-inherit'
            aria-current={isCurrentPage ? 'page' : null}
          >
            {name}
          </a>
        </li>
      ))
    }
  </ol>
</nav>
